<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>联系人</title>
    <link rel="stylesheet" href="./css/page1.css">
    <script src="./js/vue.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container">
    <div class="header">
        <div class="header1">
            <img src="images/leaf.jpg">
            <span>{{title}}</span>
            <a href="#">{{add}}</a>
        </div>

        <div class="header2">
            <input type="text" class="form-control search" placeholder="搜索">
        </div>

        <div class="header3">
            <div style="float:left;">
                <span>{{p}}</span>
            </div>

            <div style="float: right">
                <span>&gt;</span>
            </div>

        </div>
        <hr>
    </div>
    <div class="body">
        <div class="nav">
            <ul>
                <li><a href="#">好友</a></li>
                <li><a href="#">群</a></li>
                <li><a href="#">多人聊天</a></li>
                <li><a href="#">设备</a></li>
                <li><a href="#">通讯录</a></li>
                <li><a href="#">公众号</a></li>
            </ul>
            <hr>
            <div>
                <ul id="group">
                    <li class='list'>
                        <h4 style="">特别关心</h4>
                        <ul>
                            <li>ice</li>
                        </ul>

                    </li>
                    <hr>
                    <li class='list'>
                        <h4>南城</h4>
                        <ul>
                            <li><p>郭富城</p></li>
                            <li><p>张学友</p></li>
                            <li><p>刘德华</p></li>
                            <li><p>黎明</p></li>
                            <li><p>张曼玉</p></li>
                        </ul>
                    </li>
                    <hr>
                    <li class='list'>
                        <h4>北国</h4>
                        <ul>
                            <li><p>蔡依林</p></li>
                            <li><p>张天爱</p></li>
                            <li><p>杨幂</p></li>
                            <li><p>章子怡</p></li>
                            <li><p>赵丽颖</p></li>
                        </ul>
                    </li>
                    <hr>
                    <li class='list'>
                        <h4>素笺</h4>
                        <ul>
                            <li><p>何炅</p></li>
                            <li><p>李维嘉</p></li>
                            <li><p>杜海涛</p></li>
                            <li><p>谢娜</p></li>
                            <li><p>吴昕</p></li>
                        </ul>
                        <hr>

                    <li class='list'>
                        <h4>旧纸张</h4>
                        <ul>
                            <li><p>林更新</p></li>
                            <li><p>赵又廷</p></li>
                            <li><p>鹿晗</p></li>
                            <li><p>钟汉良</p></li>
                            <li><p>罗志祥</p></li>
                        </ul>
                    </li>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <div class="footer">
        <div  class="footer1" @click="changeTypeToMessage()">
            <div>
                <img src="./images/huihua.png" alt="">
            </div>
            <div style="margin-top: 2px"><a href="#" v-show="type=='message'">消息</a>
                <a href="#" v-show="type!='message'">消息</a>
            </div>
        </div>


        <div  class="footer2" @click="changeTypeToContact()">
            <div>
                <img src="./images/lianxiren.png" alt="">
            </div>
            <div style="margin-top: 2px">
                <a href="#" v-show="type=='contact'">联系人</a>
                <a href="#" v-show="type!='contact'">联系人</a>
            </div>
        </div>
        <div  class="footer3" @click="changTypeMoment()">
            <div><img src="./images/kongjian.png" alt=""></div>
            <div style="margin-top: 2px">
                <a href="#" v-show="type=='moment'">动态</a>
                <a href="#" v-show="type!='moment'">动态</a>
            </div>

        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#container",
        data: {
            title: "联系人",
            add: "添加",
            p: "新朋友",
            type: 'message',
        },
        methods: {
            changeTypeToContact(){
                this.type = 'contact';
            },

            changeTypeToMessage(){
                this.type = 'message';
            },
            changTypeMoment(){
                this.type = 'moment';
            }
        }
    });
</script>
<script>
    var oUl = document.getElementById('group');
    var aH2 = oUl.getElementsByTagName('h4');
    var aUl = oUl.getElementsByTagName('ul');
    for (i = 0; i < aH2.length; i++) {
        aH2[i].index = i;
        aH2[i].onclick = function () {
            if (this.className == '') {
                aUl[this.index].style.display = 'block';
                this.className = 'active';
            }
            else {
                aUl[this.index].style.display = 'none';
                this.className = '';
            }
        }
    }
</script>
</body>
</html>